<template>
  <!-- 商家列表 -->
  <view class="shop-list">

    <view  class="item" v-for="(item,index) in businessList"  :key="index">
      <view class="img" @click="toShopItem(item)">
        <image :src="IMG_URL + item.links[0].image" mode="aspectFill"></image>
      </view>
      <view class="msg" :class="[bgChangeColor]">
        <view class="top">
          <view class="top-txt1">
            <view class="logo">
              <image src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00556-3606.jpg"
                     mode="aspectFit"></image>
            </view>
            <view>{{ item.name }}</view>
          </view>
          <view  @click="collect(item)" style="padding: 0rpx 20rpx">
            <u-icon v-if="item.save == 0" size="50" :name="isBoy?'/static/image/userDetails/boyColl.png':'/static/image/userDetails/girlColl.png'"></u-icon>
            <u-icon v-else size="50" :name="isBoy?'/static/image/userDetails/boyCollFill.png':'/static/image/userDetails/girlCollFill.png'"></u-icon>
          </view>
        </view>
        <view class="tag">
          <view class="tag-item" :class="[bgColor]" v-for="(titleItem,index) in item.title" :key="index">{{ titleItem }}</view>
        </view>
        <view class="adr">地址:{{ item.address }}</view>
      </view>
    </view>
    <div>
<!--      <u-empty  text="暂无数据" mode="data"></u-empty>-->
    </div>
	<u-loadmore :status="status"/>
  </view>
</template>
<!--v-if="businessList.length == 0"-->
<script>
import {getShops,saveShop} from "../../../api/shop.js";
import {IMG_URL} from "../../../config/URL";

export default {
  name: "index",
  async onLoad() {
    await this.getShops(this.page)
  },
  data() {
    return {
      IMG_URL,
      userData: {
        gender: '女',
      },
      isCollect:false,
      list: [
        {img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00310-3022.jpg'},
        {img: 'https://img1.baidu.com/it/u=3882166254,2277277227&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'},
        {img: 'https://img1.baidu.com/it/u=1417698903,1215665476&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500'},
      ],
      businessList: [],
	  page:1,
    }
  },
  methods: {
	  async onReachBottom() {
		this.status = 'loading';
	  	this.page+=1
	  	await this.getShops(this.page)
	  },

    toShopItem(item) {
      let data = {
        businussId: item.id,
		save: item.save
      }
      uni.navigateTo({
        // 参数传递
        url: `/subPages/subShops/shopItem/index?data=${encodeURIComponent(JSON.stringify(data))}`
        // url:"/subPages/subShops/shopOrder/index"
      })
    },

    async getShops(y) {
      uni.showLoading({
        title: '加载中'
      });
      const shopList = await getShops({
        page: y,
        limit: 10
      });
	  if(shopList.data.data!=null){
		  shopList.data.data.map(e=>{
	  		this.businessList.push(e)
		})
	  }
      uni.hideLoading();
    },

    async collect(item) {
      item.save === 1 ? item.save=0 : item.save=1
      //收藏单家接口逻辑
	  const userInfo = uni.getStorageSync('userInfo');
	  const userId = userInfo.id;
	  // this.isCollect=!this.isCollect;
	  const res = await saveShop({
		  f_business_id: item.id,
		  f_user_id: userId,
	  })
    },

  },
  computed: {
    isBoy() {
      return this.userData.gender == '男'
    },

    bgColor() {
      let color = (this.userData.gender == '男' ? 'blue' : 'red')
      return `zy-dark-bg-${color}`
    },

    txtColor() {
      let color = (this.userData.gender == '男' ? 'blue' : 'red')
      return `zy-dark-${color}`
    },

    bgChangeColor() {
      let gender = (this.userData.gender == '男' ? 'boy' : 'girl')
      return `${gender}1-bg`
    },
  }

}
</script>

<style lang="scss" scoped>
@import "@/lib/css/color.scss";

.shop-list {
  min-height: 100vh;
  padding: 10rpx;
  //display: flex;
  //flex-direction: column;
  //justify-content: center;
  .item {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 500rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 30rpx;
  }

  .img {
    flex: 1.8;
    background-color: #00bdf1;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .msg {
    flex: 1;
    background-color: #3F536E;
    padding: 10rpx;

    .top {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;

      .top-txt1 {
        flex: 1;
        display: flex;
        font-size: 40rpx;
        font-weight: bold;

        .logo {
          height: auto;
          width: 100rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .top-txt2 {
        padding: 0rpx 40rpx;
        border-radius: 50rpx;
        height: 40rpx;
        color: white;
      }
    }

    .tag {
      color: white;
      display: flex;
      margin-top: 15rpx;
      padding-left: 100rpx;
      flex-wrap: wrap;

      .tag-item {
        border-radius: 10rpx;
        padding: 5rpx 10rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }
    }

    .adr {
      margin-top: 5rpx;
      padding-left: 100rpx;
    }
  }


}

</style>
